﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/css/view.css" />
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">
                <!-- 系统时间 -->
                <div id="time" style="font-size: 16px;line-height: 28px;color: #000000;background-color: white;">
                    <script>
                        window.onload = function () {
                            //每1秒刷新时间
                            setInterval("NowTime()", 1000);
                        }
                        function NowTime() {
                            var date = new Date();
                            var year = date.getFullYear();
                            var mounth = date.getMonth() + 1;
                            mounth = mounth < 10 ? '0' + mounth : mounth
                            var dates = date.getDate();
                            dates = dates < 10 ? '0' + dates : dates
                            var hour = date.getHours();
                            hour = hour < 10 ? '0' + hour : hour
                            var miao = date.getSeconds();
                            miao = miao < 10 ? '0' + miao : miao
                            var min = date.getMinutes();
                            min = min < 10 ? '0' + min : min
                            var Arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
                            var day = date.getDay();
                            document.getElementById('time').innerHTML = `<d class='ab'>${hour}:${min}:${miao}<d/> <br/> ${year} 年 ${mounth} 月 ${dates} 日 ${Arr[day]}   `
                        }
                        console.log(NowTime());
                    </script>
                </div>
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs">臻盈LeGo后台管理系统</li>
            </ul>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                        超级管理员
                    </a>
                    <dl class="layui-nav-child">
                        <!--TODO -->
                        <!--需要修改为自己项目的部分：-->
                        <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                        <!--2、属性data-title（选项卡标题）-->
                        <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                        <dd><a href="#" data-url="profile" data-title="您的个人资料" data-id="1" class="site-demo-active" data-type="tabAdd">您的个人资料</a></dd>
                        <dd><a href="#" data-url="Settings" data-title="系统设置" data-id="2" class="site-demo-active" data-type="tabAdd">系统设置</a></dd>
                        <dd><a href="#" data-url="log off" data-title="退出登录" data-id="3" class="site-demo-active" data-type="tabAdd">退出登录</a></dd>
                        <dd><a href="">锁屏</a></dd>
                    </dl>
                </li>
                @* 多功能菜单选项 *@
                <li class="layui-nav-item"><a href="javascript:;" data-url="" data-title="主题" data-id="4" class="site-demo-active" data-type="tabAdd"><i class="layui-icon layui-icon-theme"></i></a></li>
                <li class="layui-nav-item"><a href="javascript:;" data-url="" data-title="菜单" data-id="5" class="site-demo-active" data-type="tabAdd"><i class="layui-icon layui-icon-menu-fill"></i></a></li>
                <!-- 如果有新消息，则显示小圆点 -->
                <li class="layui-nav-item"><a href="javascript:;" data-url="" data-title="消息通知" data-id="6" class="site-demo-active" data-type="tabAdd"><i class="layui-icon layui-icon-notice"></i><span class="layui-badge-dot"></span></a></li>
                <li class="layui-nav-item"><a href="javascript:;" data-url="" data-title="全屏" data-id="7" class="site-demo-active" data-type="tabAdd"><i class="layui-icon layui-icon-screen-full"></i></a></li>
                @* 更多 *@
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect="">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item" style="background-color: red; color: #000000;">
                        <a href="~/Admin/Admin">仪表盘</a>
                    </li>
                    <li class="layui-nav-item layui-menu-item-up">
                        <a class="" href="javascript:;">产品管理</a>
                        <dl class="layui-nav-child">
                            <!--TODO -->
                            <!--需要修改为自己项目的部分：-->
                            <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                            <!--2、属性data-title（选项卡标题）-->
                            <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                            <dd>
                                <a href="javascript:;" data-url="" data-title="商品管理" data-id="8"
                                   class="site-demo-active" data-type="tabAdd">商品管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="" data-title="品牌管理" data-id="9"
                                   class="site-demo-active" data-type="tabAdd">品牌管理</a>
                            </dd>
                            <dd>
                                <!--TODO -->
                                <!--需要修改为自己项目的部分：-->
                                <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                                <!--2、属性data-title（选项卡标题）-->
                                <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                                <a href="javascript:;" data-url="" data-title="产品统计" data-id="10"
                                   class="site-demo-active" data-type="tabAdd">产品统计</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="" data-title="分类管理" data-id="11"
                                   class="site-demo-active" data-type="tabAdd">分类管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">交易管理</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">支付管理</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">系统管理</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">文章管理</a></li>
                    <li class="layui-nav-item layui-menu-item-up">
                        <a class="" href="javascript:;">会员管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <!--TODO -->
                                <!--需要修改为自己项目的部分：-->
                                <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                                <!--2、属性data-title（选项卡标题）-->
                                <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="会员列表" data-id="12"
                                   class="site-demo-active" data-type="tabAdd">会员列表</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="会员等级" data-id="13"
                                   class="site-demo-active" data-type="tabAdd">会员等级</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-menu-item-up">
                        <a class="" href="javascript:;">管理员</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="个人信息" data-id="14"
                                   class="site-demo-active" data-type="tabAdd">个人信息</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="登录记录" data-id="15"
                                   class="site-demo-active" data-type="tabAdd">登录记录</a>
                            </dd>
                            <dd>
                                <!--TODO -->
                                <!--需要修改为自己项目的部分：-->
                                <!--1、属性data-url（需要在右边选项卡中打开的页面的路径）  -->
                                <!--2、属性data-title（选项卡标题）-->
                                <!--3、属性data-id必须唯一，tab选项卡根据这个值进行切换-->
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="权限设置" data-id="16"
                                   class="site-demo-active" data-type="tabAdd">权限设置</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-url="index.php?&a=adminList" data-title="个人便签" data-id="17"
                                   class="site-demo-active" data-type="tabAdd">个人便签</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">广告管理</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">框架说明</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">插件管理</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body ">
            <!-- 内容主体区域 -->
            <!-- 页面标签 -->
            <div class="layui-tab" lay-filter="demo" lay-allowClose="true">
                <!--tab页标题-->
                <ul class="layui-tab-title">
                </ul>

                @*tab页标题上右键，出现下面的 关闭当前和关闭所有的选项*@
                <ul class="rightMenu" style="display: none;position: absolute;">
                    <li data-type="closeThis" class="layui-bg-cyan">关闭当前</li>

                    <li data-type="closeAll" class="layui-bg-cyan">关闭所有</li>
                </ul>

                <!--tab页主体内容区域-->
                <div class="layui-tab-content">
                    @RenderBody()
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <div id="demo3"></div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>

    </div>

    <script src="<%=basePath%>/Content/js/layui.js" type="text/javascript"></script>
    <script>
        //JS
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });
        });
    </script>
    @*选项卡方法实现*@
    <script src="~/Content/jQuery/jquery-3.3.1.js"></script>
    <script>
        //layer弹出层组件
        layui.use(['element', 'layer'], function () {
            var $ = layui.jquery;
            var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                // 在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function (url, id, name) {
                    // 新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    // 关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('demo', {
                        title: name,
                        // TODO
                        // 这里的选项卡页面路径：  src="' + url + '.html"  ，可能需要根据自己项目实际的后缀名修改
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '.html" style="width:100%;height:99%;"></iframe>',
                        id: id // 规定好的id
                    })
                    CustomRightClick(id); // 自定义函数，给tab绑定右击事件
                    FrameWH();  // 自定义函数，计算iframe层的大小
                },
                tabChange: function (id) {
                    // 切换到指定Tab项
                    element.tabChange('demo', id); // 根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("demo", id);// 删除
                }
                , tabDeleteAll: function (ids) {// 删除所有
                    $.each(ids, function (i, item) {
                        element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
                    })
                }
            };

            // 当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-demo-active').on('click', function () {
                var dataid = $(this);

                // 这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    // 如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } else {
                    // 否则判断该tab项是否已经存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                // 最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

            //Table选项卡右键操作
            function CustomRightClick(id) {

                //取消右键  rightMenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
                $('.layui-tab-title li').on('contextmenu', function () {
                    return false;
                })

                $('.layui-tab-title,.layui-tab-title li').click(function () {
                    $('.rightMenu').hide();
                });

                //桌面点击右击
                $('.layui-tab-title li').on('contextmenu', function (e) {
                    var popupmenu = $(".rightMenu");
                    popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                    //判断右侧菜单的位置
                    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                    popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
                    //alert("右键菜单")
                    return false;
                });
            }

            //table选项卡右键菜单
            $(".rightMenu li").click(function () {

                //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
                if ($(this).attr("data-type") == "closeThis") {
                    //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete
                    active.tabDelete($(this).attr("data-id"))
                } else if ($(this).attr("data-type") == "closeAll") {
                    var tabtitle = $(".layui-tab-title li");
                    var ids = new Array();
                    $.each(tabtitle, function (i) {
                        ids[i] = $(this).attr("lay-id");
                    })
                    //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                    active.tabDeleteAll(ids);
                }

                $('.rightMenu').hide(); //最后再隐藏右键菜单
            })
            // 计算frame高度
            function FrameWH() {
                var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                $("iframe").css("height", h + "px");
            }

            //调整大小
            $(window).resize(function () {
                FrameWH();
            })

            var layer = layui.layer;
            layer.ready(function () {
                // layer.msg('您已进入页面了！');
                // 触发点击事件，这样就可以设置默认显示的选项卡页面
                // TODO
                // 可能需要修改的地方，标签id值
                $("#default-tab").trigger("click");
            });

        });

    </script>

    <script>
        var jQuery_3_3_1 = $.noConflict();
        $(function () {
            jQuery_3_3_1('#mytxt').attr("test");
        })
    </script>
</body>
</html>
